<%@ page language="java" import="java.util.*"%>
<%@ page session="true"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="t"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../../template/estilos.jsp"%>
<%@include file="../../template/script.jsp" %>
<script src="${pageContext.request.contextPath}/resources/assets/scripts/module/Account.js" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/resources/assets/scripts/ui-jqueryui.js"></script>  
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css"/>
<title>Insert title here</title>
 <script>
     var FormSamples = function () {


    return {
        //main function to initiate the module
        init: function () {

            // use select2 dropdown instead of chosen as select2 works fine with bootstrap on responsive layouts.
            $('.select2_category').select2({
	            placeholder: "Select an option",
	            allowClear: true
	        });

            $('.select2_sample1').select2({
                placeholder: "Select a State",
                allowClear: true
            });

            $(".select2_sample2").select2({
                placeholder: "Type to select an option",
                allowClear: true,
                minimumInputLength: 1,
                query: function (query) {
                    var data = {
                        results: []
                    }, i, j, s;
                    for (i = 1; i < 5; i++) {
                        s = "";
                        for (j = 0; j < i; j++) {
                            s = s + query.term;
                        }
                        data.results.push({
                            id: query.term + i,
                            text: s
                        });
                    }
                    query.callback(data);
                }
            });

            $(".select2_sample3").select2({
                tags: ["red", "green", "blue", "yellow", "pink"]
            });

        }

    };

}();
     </script>
</head>

<body class="page-header-fixed">
    <!--form action="#" name="listCountry" -->   
    <%@include file="../../template/header.jsp"%>
        <!--div class="page-container" -->
            
          <div class="page-container"> 
              <%@include file="../../template/sidebar.jsp"%>
            <div class="page-content">
              <form:form action="newsave"  id="form"  method="post"  class="form-horizontal formdata">
                  
                <%@include file="../../template/header_module.jsp"%>
               <div class="row-fluid">
					<div class="span12">
						<!-- BEGIN EXAMPLE TABLE PORTLET-->
                                                <div class="container-fluid">
						<div class="portlet box grey">
							<div class="portlet-title">
								<div class="caption"><i class="icon-share"></i>View Account</div>
								 
							</div>
							<div class="portlet-body">
                                                           
                                                          <div class="tabbable tabbable-custom">
							    <ul class="nav nav-tabs">
							     <li class="active"><a href="#tab_1_1" data-toggle="tab">Informaci&oacute;n B&aacute;sica</a></li>
								<li><a href="#tab_1_2" data-toggle="tab">Datos de Facturaci&oacute;n</a></li>
                                                                <li><a href="#tab_1_3" data-toggle="tab">Datos de Env&iacute;o</a></li>
							    </ul>
                                                         
						<div class="tab-content">
					          <div class="tab-pane active" id="tab_1_1">
                                                      <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="name">Name : &nbsp;</label>
								<div class="controls">
                                                                    <input type="text" id="name" name="name" value="${val.name.trim()}" class="m-wrap span12" readonly >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="ruc">Ruc  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="ruc" name="ruc" value="${val.accountNo.trim()}" class="m-wrap span12" readonly >
								</div>
							    </div>
							   </div>
							 </div>
                                                          
                                                            <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="phone">Phone : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="phone" name="phone" value="${val.phone.trim()}" class="m-wrap span12" readonly >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="email">Email  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="email" name="email" value="${val.email.trim()}" class="m-wrap span12" readonly >
								</div>
							    </div>
							   </div>
							 </div>
                                                            
                                                         <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="website">Web Site : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="website" name="website" value="${val.website.trim()}" class="m-wrap span12" readonly >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="fax">Fax  : &nbsp;</label>
								<div class="controls">
								 <input type="text" id="fax" name="fax" value="${val.fax.trim()}" class="m-wrap span12" readonly >
								</div>
							    </div>
							   </div>
							 </div>
                                                            
                                                         <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="foundation">Foundation : &nbsp;</label>
								<div class="controls">
                                                                    <input class="m-wrap span12" size="16" type="text" name="foundation" disabled value="${val.foundation}" id="ui_date_picker_change_year_month"/>
								</div>
							     </div>
						           </div>
							 
							 </div> 
                                                      
                                                      <div class="control-group">
							<label class="control-label">Image Upload</label>
							 <div class="controls">
							  <div class="fileupload fileupload-new" data-provides="fileupload">
							   
							    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
                                                            <img src="/GedeonMvc/resources/accountPictures/${val.imageName.trim()}" class="black"  style="width: 200px; height: 150px;" />
                                                            </div><br>
								<div> 
								<input type="file" class="default" id="inputfile" style="display:none;" /> 
                                                               </div>
						         </div>
							  </div>
							</div>
                                                      </c:forEach>
                                                       </div>
						   
                                                    <div class="tab-pane" id="tab_1_2">
                                                        <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboCountryBill">Country Bill : &nbsp;</label>
								<div class="controls">
								<input class="m-wrap span12" size="16" type="text"  disabled value="${val.countryBill.name.trim()}"  />
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDepartmentBill">Department Bill  : &nbsp;</label>
								<div class="controls">
                                                                 <input class="m-wrap span12" size="16" type="text"  disabled value="${val.departmentBill.name.trim()}"  />
								</div>
							    </div>
							   </div>
						   </div>
                                                         
                                                        <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboProvinceBill">Province Bill : &nbsp;</label>
								<div class="controls">
								 <input class="m-wrap span12" size="16" type="text"  disabled value="${val.provinceBill.name.trim()}"  />
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDistrictBill">District Bill  : &nbsp;</label>
								<div class="controls">
								 <input class="m-wrap span12" size="16" type="text"  disabled value="${val.districtBill.name.trim()}"  />
								</div>
							    </div>
							   </div>
						   </div>
                                                        
                                                          <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="addressbill">Address Bill : &nbsp;</label>
								<div class="controls">
								  <input type="text" id="addressbill" name="addressbill" disabled value="${val.addressBill.trim()}" placeholder="Address Bill" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="emailbill">Email Bill  : &nbsp;</label>
								<div class="controls">
								 <input type="text" disabled value="${val.emailBill.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
						   </div>
                                                     </c:forEach>      
                                                        
						</div>
							
                                                 <div class="tab-pane" id="tab_1_3">
                                                     <c:forEach var="val" items="${ACCOUNT}"> 
							<div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboCountryShipping">Country Shipping : &nbsp;</label>
								<div class="controls">
								 <input type="text" disabled value="${val.countryShipping.name.trim()}" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDepartmentShipping">Department Shipping  : &nbsp;</label>
								<div class="controls">
                                                                  <input type="text" disabled value="${val.departmentShipping.name.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
						   </div>
                                                        
                                                        <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="CboProvinceShipping">Province Shipping : &nbsp;</label>
								<div class="controls">
								 <input type="text" disabled value="${val.provinceShipping.name.trim()}" class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="CboDistrictShipping">District Shipping  : &nbsp;</label>
								<div class="controls">
								 <input type="text" disabled value="${val.districtShipping.name.trim()}" class="m-wrap span12" >
								</div>
							    </div>
							   </div>
						   </div>
                                                        
                                                          <div class="row-fluid">
							    <div class="span5">
							     <div class="control-group">
                                                                 <label class="control-label" for="addressshipping">Address Shipping : &nbsp;</label>
								<div class="controls">
								  <input type="text" disabled value="${val.addressShipping.trim()}"  class="m-wrap span12" >
								</div>
							     </div>
						           </div>
								  
							   <div class="span5">
							     <div class="control-group">
							      <label class="control-label" for="emailShipping">Email Shipping  : &nbsp;</label>
								<div class="controls">
								 <input type="text" disabled value="${val.emailShipping.trim()}"  class="m-wrap span12" >
								</div>
							    </div>
							   </div>
						   </div>
                                                   </c:forEach>   
                                                     
                                                        
						</div>
							
                                                </div>
                                                            
                                                             <div class="control-group"> 
                                                               <div class="controls">
                                                               </div>
                                                            </div>  
                                                            <div class="control-group"> 
                                                               <div class="controls">
                                                                     <a class="btn blue"  data-toggle='modal' href="update?module=<%=request.getParameter("module") %>&id=<%=request.getParameter("id") %>"><i class="icon-ok"></i> Edit</a>
                                                                 
                                                                <a href="index?module=<%=request.getParameter("module") %>"><button type="button" data-dismiss="modal" class="btn"><i class="icon-remove"></i> Cancel</button></a>  
                                                               <a class="btn red" data-toggle="modal" onclick="confirmDelete('<%=request.getParameter("id") %>');"  href='#static' >
                                                                     <i class='icon-trash'></i> Delete</a>
                                                               </div>
                                                            </div>  
							</div> 
							</div>
						</div>
                                              </div> 
					</div> 
				</div>
                                     <div id="static" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
                                    <div class="modal-body">
					<p>Are you sure do you want delete this account?</p>
                                    </div>
                                    <div class="modal-footer">
                                    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
                                    <button type="button" onclick="submitDelete();"  data-dismiss="modal" class="btn red">Delete</button>
                                    </div>    
                                </div>  
                 <input type="hidden" value="<%=request.getParameter("id") %>" name="id" id="id"/>
                  <c:forEach var="system" items="${dataSystem}"> 
                      <input type="hidden" value="${system.id}" name="createdBy" id="createdBy" /> 
                      <input type="hidden" value="${system.id}" name="ownerId" id="ownerId" /> 
                  </c:forEach>  
                  <input type="hidden" value="<%=request.getParameter("module") %>" name="module" id="module"/>
               </form:form>
            </div>
        </div> 
        <%@include file="../../template/footer.jsp"%> 
        <script>
		jQuery(document).ready(function() {       
	 
                   FormSamples.init();
UIJQueryUI.init();
		});
	</script>
    </body>
</html>















